{{ template "base.html"}}

{{define "title"}}我的笔记{{end}}

{{define "head"}}
{{end}}

{{define "content"}}
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree  layui-anim layui-anim-upbit "  lay-filter="test">

                {{ if .user.is_active }}
                <li class="layui-nav-item">
                    <a href="javascript:;"><span class="layui-icon">&#xe621;{{ .user.userName }}的笔记</span></a>
                    <dl class="layui-nav-child", id="note_list">

                    </dl>
                </li>
                {{ end }}
            </ul>
        </div>

        <div class="layui-body" style="padding: 15px" id="main_content">
            <!-- 内容主体区域 -->
            <!-- 存在笔记且为查看模式 -->
            <div id="test-editor">
                <textarea style="display:none;">### 关于 Editor.md

            **Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
                </textarea>
            </div>

        </div>
        <div class="layui-footer layui-anim layui-anim-scale">
            <!-- 底部固定区域 -->
            <div class="layui-btn-container", id="operate_list">
            </div>
        </div>

        <div style="margin: 5%; display: none" id="rename_note">
            <form class="layui-form" id="book" method="post" lay-filter="example">
                <div class="layui-form-item">
                    <input type="text" id="title_text" name="bid" lay-verify="title" autocomplete="off" placeholder="请输入文件名" class="layui-input">
                </div>
            </form>
        </div>
    </div>
{{end}}

{{define "script"}}
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../static/editor.md-master/editormd.min.js"></script>
    <script>
        var user_ID = {{ .user.userID }};
        var note_url = '/note';

        get_list_data('0');

        function get_detail_data(collect_ID) {
            var user_ID = {{ .user.userID }};
            layui.use(['layer', 'jquery', 'element'], function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                var element = layui.element;
                var index = layer.load(1);
                $.ajax({
                    url:'/api/get_note_by_ID',
                    type:"GET",
                    async:true,
                    data:{'userID': user_ID, 'collectID': collect_ID},
                    success:function (res) {
                        if(res.code == '200'){
                            var note_detail_data = res.data['title'];
                            document.getElementById("main_content").innerHTML = "";
                            edit_note(note_detail_data);
                            var editor = editormd("text-editor", {
                                watch:true,
                                path: "../static/editor.md-master/lib/"
                            });
                            element.render('body');
                            layer.close(index);
                        }
                        else{
                            alert(res.msg);
                            layer.close(index);
                        }
                    },
                    error:function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            })
        }

        function edit_note(detail_data) {
            var $div_main = $('#main_content');
            var $div_editor = $('<div id="text-editor"></div>');
            var $text_area = $('<textarea style=\"display:none;\"></textarea>');
            $text_area.append(detail_data);
            $div_editor.append($text_area);
            $div_main.append($div_editor);
        }

        function get_list_data(mode) {
            layui.use(['element', 'layer'], function(){
                var element = layui.element;
                var layer = layui.layer;
                var note_data;
                var index = layer.load(1);
                $ = layui.jquery;
                $.ajax({
                    url: "/api/get_note_list",
                    type: "GET",
                    data: {'userID': user_ID},
                    async: true,
                    success:function (res) {
                        if(res.code == '2001'){
                            add_when_no_data();
                            element.render('body');
                            layer.close(index);
                        }
                        else if (res.code == '200'){
                            note_data = res.data;
                            if(mode == '0') {
                                var collect_id = note_data[0]['collectID'];
                                get_detail_data(collect_id);
                                element.render('body');
                            }
                            loadin_nav(note_data);
                            element.render('nav', 'test');
                            layer.close(index);
                        }
                        else{
                            alert(res.msg);
                            layer.close(index);
                        }
                    },
                    error:function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            });
        }
        function add_when_no_data() {
            document.getElementById("main_content").innerHTML =
                "<div class=\"layui-anim layui-anim-upbit\" style=\"height: 100%; width: 100%; align-items:center; display: -webkit-flex; justify-content:center; display: -webkit-flex;\">\n" +
                "                     <div class=\"layui-container\" >\n" +
                "                         <div style=\"text-align: center;\">\n" +
                "                             <i class=\"layui-icon layui-icon-tips\" style=\"font-size: 30px;color: #1E9FFF;\"></i>\n" +
                "                         </div>\n" +
                "                         <div class=\"layui-card\" style=\"padding: 15px\">\n" +
                "                             <h1 style=\"text-align: center;color: #0C0C0C\">暂时没有笔记</h1>\n" +
                "                         </div>\n" +
                "                         <div class=\"layui-card\" style=\"text-align: center;padding: 15px\">\n" +
                "                            <button type=\"button\" class=\"layui-btn layui-btn-normal\" id=\"add_note_button\">" +
                "                            </button>" +
                "                            <button type=\"button\" class=\"layui-btn layui-btn-normal\" id=\"add_note_folder_button\">" +
                "                            </button>"
            $('#add_note_button').html(
                '<a style=\"color: white\" onclick= add_note(\'0\'' + ',' + '1' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记</a> '
            );
            $('#add_note_folder_button').html(
                '<a style=\"color: white\" onclick= add_note(\'0\'' + ',' + '2' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</a> '
            );
        }

        function loadin_note(item, parid) {
            if(parid == '0'){
                var $dlp = $('#note_list');
            }
            else{
                var $dlp = $('#nt'+ item['parentID']);
            }
            var $li = $('<li class=\"layui-nav-item\" id=note' + item['collectID'] + '></li>');
            $li.append($('<a id=\"' + item['collectID'] + '\" onclick= get_detail_data(' + item['collectID'] +') ><span class=\"layui-icon\">&#xe621;' + item['title'] + '</span></a>'));
            var $dl = $('<dl class=\"layui-nav-child\" ></dl>');
            $dl.append($('<dd><a  onclick= del_note(' + item['collectID'] +')> <span class=\"layui-icon\">&#xe616;</span>删除</a></dd>'));
            $dl.append($('<dd><a  onclick= rename_note(' + item['collectID'] + ',' + '1' + ')> <span class=\"layui-icon\">&#xe669;</span>重命名</a></dd>'));
            $li.append($dl);
            $dlp.append($li);
        }

        function loadin_folder(item, parid) {
            if(parid == '0'){
                var $dlp = $('#note_list');
            }
            else{
                var $dlp = $('#nt'+ item['parentID']);
            }
            var $li = $('<li class="layui-nav-item" id=folder' + item['collectID'] + '></li>');
            $li.append($('<a id=\"' + item['collectID'] + '\" ><span class=\"layui-icon\">&#xe621;' + item['title'] + '</span></a>'));
            var $dl = $('<dl class=\"layui-nav-child\" id=nt' + item['collectID'] + '></dl>');
            $dl.append($('<a><span class=\"layui-icon\">&#xe631;操作</span></a>'));
            var $ddl = $('<dl class=\"layui-nav-child\" id=nt' + item['collectID'] + '></dl>');
            $ddl.append($('<dd><a  onclick= add_note(' + item['collectID'] + ',' + '1' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记</a></dd>'));
            $ddl.append($('<dd><a  onclick= add_note(' + item['collectID'] + ',' + '2' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</a></dd>'));
            $ddl.append($('<dd><a  onclick= del_note_folder(' + item['collectID'] + ',' + '1' + ')> <span class=\"layui-icon\">&#xe616;</span>删除</a></dd>'));
            $ddl.append($('<dd><a  onclick= rename_note(' + item['collectID'] + ',' + '2' + ')> <span class=\"layui-icon\">&#xe669;</span>重命名</a></dd>'));
            $dl.append($ddl);
            $li.append($dl);
            $dlp.append($li);
        }

        function loadin_nav(jsondata){
            layui.use('layer', function () {
                var layer = layui.layer;
                var index = layer.load(1);
                var $dlp = $('#note_list');
                var $li = $('<li class="layui-nav-item"></li>')
                $li.append($('<a><span class=\"layui-icon\">&#xe631;操作</span></a>'));
                var $dl0 = $('<dl class=\"layui-nav-child\" id=\"nt0\"></dl>')
                $dl0.append($('<dd><a  onclick= add_note(\'0\'' + ',' + '1' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记</a></dd>'));
                $dl0.append($('<dd><a  onclick= add_note(\'0\'' + ',' + '2' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</a></dd>'));
                $li.append($dl0);
                $dlp.append($li);
                for(var i = 0; i < jsondata.length;i++){
                    var item = jsondata[i];
                    if(item['type'] == '1'){
                        loadin_note(item, item['parentID']);
                    }
                    else if(item['type'] == '2'){
                        loadin_folder(item, item['parentID']);
                    }
                }
                layer.close(index);
            })

        };
        function rename_note(collect_ID, file_type) {
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var userID = {{ .user.userID }};
                layer.open({
                    type: 1,
                    title:"重命名",
                    btn: ['确定', '取消'],
                    shadeClose: true,
                    shade: 0,
                    content: $("#rename_note"),
                    yes:function (ind) {
                        var index = layer.load(1);
                        var title = $('#title_text').val();
                        $.ajax({
                            url:'/api/rename_note',
                            type:"POST",
                            async:true,
                            data:{'userID': userID, 'type': file_type, 'collectID': collect_ID, 'title': title},
                            success:function (res) {
                                if(res.code == '200'){
                                    layer.msg('重命名成功!');
                                    document.getElementById("note_list").innerHTML = "";
                                    get_list_data("1");
                                    get_detail_data(res.data['collectID']);
                                    layer.close(index);
                                    layer.close(ind);
                                }
                                else{
                                    layer.msg(res.msg);
                                    layer.close(index);
                                }
                            },
                            error:function f(res) {
                                alert("请求失败！状态码：" + res.status);
                                layer.close(index);
                            }
                        })
                    },
                    cancel:function () {
                    }
                });
            })
        }
        function del_note_folder(collect_ID) {
            var userID = {{ .user.userID }};
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                layer.open({
                    content: '是否删除该文件夹?',
                    btn:['确定', '取消'],
                    yes:function (index, layero) {
                        var index = layer.load(1);
                        $.ajax({
                            url:'/api/delete_note_folder',
                            type:'GET',
                            data:{'collectID': collect_ID, 'userID': userID},
                            async: true,
                            success:function (res) {
                                if(res.code == '200'){
                                    layer.msg('删除成功');
                                    document.getElementById("note_list").innerHTML = "";
                                    document.getElementById("main_content").innerHTML = "";
                                    get_list_data("0");
                                    layer.close(index);
                                }
                                else{
                                    alert(res.msg);
                                    layer.close(index);
                                }
                            },
                            error:function f(res) {
                                alert("请求失败！状态码：" + res.status);
                                layer.close(index);
                            }
                        })
                    },
                    cancel:function () {
                    }
                });
            })
        }
        function del_note(collect_ID) {
            var userID = {{ .user.userID }};
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                layer.open({
                    content: '是否删除该笔记?',
                    btn:['确定', '取消'],
                    yes:function (index, layero) {
                        var index = layer.load(1);
                        $.ajax({
                            url:'/api/delete_note',
                            type:'GET',
                            data:{'collectID': collect_ID, 'userID': userID},
                            async: true,
                            success:function (res) {
                                if(res.code == '200'){
                                    layer.msg('删除成功');
                                    document.getElementById("note_list").innerHTML = "";
                                    document.getElementById("main_content").innerHTML = "";
                                    get_list_data("0");
                                    layer.close(index);
                                }
                                else{
                                    alert(res.msg);
                                    layer.close(index);
                                }
                            },
                            error:function f(res) {
                                alert("请求失败！状态码：" + res.status);
                                layer.close(index);
                            }
                        })
                    },
                    cancel:function () {
                    }
                });
            })
        }
        function add_note(parent_ID, type) {
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                var index = layer.load(1);
                $.ajax({
                    url:'/api/add_note',
                    type: 'POST',
                    data: {'userID': user_ID, 'parentID': parent_ID, 'type': type},
                    async: true,
                    success:function(res){
                        if(res.code == '200'){
                            layer.msg('新建成功!');
                            document.getElementById("note_list").innerHTML = "";
                            document.getElementById("main_content").innerHTML = "";
                            get_list_data("1");
                            var collect_ID = res.data['collectID'];
                            get_detail_data(collect_ID);
                            layer.close(index);
                        }
                        else{
                            alert(res.msg);
                            layer.close(index);
                        }
                    },
                    error:function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            })
        }
    </script>
{{end}}